<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>scale</title>
    <style type="text/css">
        p{
            font-size: 15px;
            color: red;
            font-weight: bold;
        }
        #box1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .box1{
            transform: scale(0.1);
            -webkit-transform:scale(0.1);
            -moz-transform:scale(0.1);
            -ms-transform:scale(0.1);
        }
        .box2{
            transform: scale(-0.1);
            -webkit-transform:scale(-0.1);
            -moz-transform:scale(-0.1);
            -ms-transform:scale(-0.1);
        }
        .box3{
            transform: scale(1);
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
            -ms-transform:scale(1);
        }
        .box4{
            transform: scale(3);
            -webkit-transform:scale(3);
            -moz-transform:scale(3);
            -ms-transform:scale(3);
        }
        .box5{
            transform: scale(-5);
            -webkit-transform:scale(-5);
            -moz-transform:scale(-5);
            -ms-transform:scale(-5);
        }
        .box6{
            transform: scale(2,2);
            -webkit-transform:scale(2,2);
            -moz-transform:scale(2,2);
            -ms-transform:scale(2,2);
        }
        .box7{
            transform: scale(-2,-2);
            -webkit-transform:scale(-2,-2);
            -moz-transform:scale(-2,-2);
            -ms-transform:scale(-2,-2);
        }
        .box8{
            transform: scale(0.5,0.5);
            -webkit-transform: scale(0.5,0.5);
            -moz-transform: scale(0.5,0.5);
            -ms-transform: scale(0.5,0.5);
        }
    </style>
</head>
<body>
<p>css属性：</p>
scale
<br/>
<input type="radio" onclick="fn1()" name="se"/>scale(0.1)
<br/>
<input type="radio" onclick="fn3()" name="se"/>scale(1)
<br/>
<input type="radio" onclick="fn4()" name="se"/>scale(3)
<br/>
<input type="radio" onclick="fn6()" name="se"/>scale(2,2)
<br/>
<input type="radio" onclick="fn8()" name="se"/>scale(0.5,0.5)

<p>结果</p>
<div id="box1">
    <div id="box2"></div>
</div>
</body>
<script type="text/javascript">
    function fn1(){
        var box2=document.getElementById("box2");
        box2.className="box1"
    }
    function fn2(){
        var box2=document.getElementById("box2");
        box2.className="box2"
    }
    function fn3(){
        var box2=document.getElementById("box2");
        box2.className="box3"
    }
    function fn4(){
        var box2=document.getElementById("box2");
        box2.className="box4"
    }
    function fn5(){
        var box2=document.getElementById("box2");
        box2.className="box5"
    }
    function fn6(){
        var box2=document.getElementById("box2");
        box2.className="box6"
    }
    function fn7(){
        var box2=document.getElementById("box2");
        box2.className="box7"
    }
    function fn8(){
        var box2=document.getElementById("box2");
        box2.className="box8"
    }
</script>
</html>